<template>
	<view class="container">
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
			<!-- 页面内容 -->
			<view class="" slot="top">
				<TopNav title="内购商城"></TopNav>
				<view class="header">
					<view class="tag">
						<view class="tag-item" v-for="(item,index) in tagList" :key="index"
							@click="handleTagChange(item,index)" :class="{'tag-active':index === tagCurrent}">
							<text>{{item.text}}</text>
						</view>
					</view>

				</view>
			</view>

			<view class="main">

				<view class="card">
					<view class="radius bg-white flex justify-between p-10" v-for="item in list" :key="item.id">
						<view class="flex shrink-0">
							<image :src="item.image || '/static/logo.png'"
								class="width-80 height-80 shrink-0 bg-gray radius" mode=""></image>
							<view class="flex flex-direction justify-start p-l16">
								<text class="f-s16 m-t5 f-w600">{{item.name}}</text>
								<view class="m-t25">
									<text class="text-theme f-s18 text-bold">{{item.price}}</text>
									<text class="p-l3 text-grey">/{{item.unit}}</text>
								</view>
							</view>
						</view>
						<view class="self-end">
							<u-number-box v-model="item.num" disabledInput :min="0" :max="100" color="#202020"
								buttonSize="52rpx" bgColor="#F0F1F2"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-tb-xs" v-if="total !== 0">
				<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
			</view>
			<Empty :show="total === 0"></Empty>
			<view class="flex align-center justify-between bg-white toolbar">
				<view class="flex align-items-baseline tips" @click="handleToOrder">
					<view class="f-s12 text-theme">
						<text>查看订单  >></text>
					</view>
				</view>
				<view class="flex align-center">
					<image src="/static/images/mine/menu/shopping/cart.png" class="width-40 height-40" mode=""></image>
					<view class="text-theme flex align-baseline p-l12">
						<text>￥</text>
						<text class="f-s22">{{checkout.total || 0}}</text>
					</view>

				</view>
				<view class="order-btn" hover-class="pressed" @click="handlePlaceOrder">
					<text>立即下单</text>
				</view>
			</view>
		</z-paging>
		<Toast></Toast>
	</view>
</template>

<script>
	import dayjs from "dayjs"
	import {
		goodsList as list,
		goodsType,
		settlement
	} from "@/api/mine/shopping.js"
	import mixins from "@/mixins";
	import Empty from '@/components/empty/index.vue'
	export default {
		components: {Empty},
		mixins: [mixins],
		data() {
			return {
				value: 0,
				list: [],
				queryParams: {
					cate_id: '',
					page: 1,
					limit: 10
				},
				tagCurrent: 0,
				tagList: []
			}
		},
		onLoad() {
			this.getGoodsType()
			this.getList()
		},
		onUnload() {
			uni.$off('refresh', this.handleEmitRefresh)
		},
		onReachBottom() {
			this.handleScrollBottom()
		},
		computed: {
			checkout() {
				let filterList = this.list.filter(item => item.num)
				let total = filterList.reduce((prev, curr) => {
					return prev + (Number(curr.price) * curr.num) || 0
				}, 0)
				let result = filterList.map(item => {
					return {
						id: item.id,
						num: item.num,
						price: item.price
					}
				})
				return {
					total,
					result
				}
			}
		},
		methods: {
			handleEmitRefresh(status){
				if(status){
					this.queryParams.page = 1
					this.getList()
				}
			},
			handleToOrder(){
				this.$tab.navigateTo('./shopping/order')
			},
			handlePlaceOrder() {
				if (this.checkout.total == 0) {
					this.$toast('结算金额为0')
					return
				}
				this.$modal.loading("正在提交").then(() => {
					settlement({goods:this.checkout.result}).then(res => {
						this.$modal.closeLoading()
						// 监听是否触发刷新
						uni.$on('refresh', this.handleEmitRefresh)
						this.$tab.navigateTo(
							`/pages/mine/menu/shopping/place-order?info=${encodeURIComponent(JSON.stringify(res.data))}`
							)
					}).catch(() => this.$modal.closeLoading())
				})


			},
			getGoodsType() {
				goodsType().then(res => {
					let goodsTypeList = res.data?.map(item => {
						return {
							text: item.name,
							value: item.id
						}
					})
					goodsTypeList.unshift({
						text: '全部',
						value: '0'
					})
					this.tagList = goodsTypeList
				})
			},
			// 下拉刷新被触发
			onRefresh() {
				this.queryParams.page = 1
				this.getList('scroll')
			},
			getList(type) {
				list(this.queryParams).then(res => {
					// 使用了下拉刷新，获取到数据更新加载状态
					if (type === 'scroll') {
						this.$refs.paging.complete();
					}
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count
					this.pageTotal = total
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				}).catch(() => {
					if (type === 'scroll') {
						this.$refs.paging.complete();
					}
				})
			},
			handleTagChange(select, index) {
				this.list = []
				this.queryParams.page = 1
				this.queryParams.cate_id = select['value']
				this.tagCurrent = index
				this.getList()
			},
			handleCancelSignup(select, index) {
				this.cancelIndex = index
				this.cancelForm.id = select.id
				this.modalShow = true
			},
			// 详情页操作回调
			handleEmitDetail(raw) {
				if (raw.type == 'sign' || raw.type === 'cancel') {
					let findIndex = this.list.findIndex(item => item.id === raw.id)
					// 报名或取消报名操作，从列表中移除
					this.list.splice(findIndex, 1)
				}
			},
			handleToPage(id) {
				// 监听详情操作
				this.$tab.navigateTo('detail?id=' + id)
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx + 60rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx + 60rpx);
	}
</style>
<style lang="scss" scoped>
	@import '@/common/css/var.scss';

	.container {
		background-color: inherit;
		.tips {
			background: #FEEBEE;
			padding: 20rpx 24rpx;
			width: 100%;
			position: absolute;
			left: 0;
			bottom:100%;
		}
		.header {
			padding: 20rpx 24rpx;
			position: sticky;
			@include sticky-top;
			z-index: 99;
			background-color: inherit;

			.tag {
				display: flex;

				.tag-item {
					width: 136rpx;
					height: 64rpx;
					background-color: #FFFFFF;
					border-radius: 32rpx;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 64rpx;
					text-align: center;
					margin-right: 20rpx;
				}

				.tag-active {
					background-color: #202020;
					color: #fff;
				}
			}
		}

		.main {
			padding: 20rpx;

		}

		.toolbar {
			width: 100%;
			height: 150rpx;
			padding: 0 20rpx;
			position: fixed;
			bottom: 0;
			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));

			.order-btn {
				width: 200rpx;
				height: 80rpx;
				background-color: #FE3F59;
				color: #fff;
				border-radius: 60rpx;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 80rpx;
				text-align: center;
			}
		}

	}

	::v-deep .uicon-plus {
		font-size: 32rpx;
		color: #FE3F59 !important;
	}

	::v-deep .uicon-minus {
		font-size: 32rpx;
		color: #FE3F59 !important;
	}
</style>